<#include "/admin/common/layout/__mainlayout.html"> <#assign
pageBreadCrumbs>
<li><a href="#">Other Pages</a></li>
<li class="active">Blank Page</li>
</#assign> <@mainlayout currentMenu="UIFlag-buttonsFlag">
<!-- pageHeader BEGAIN -->
<div class="page-header">
	<h1>
		Buttons &amp; Icon <small> <i
			class="ace-icon fa fa-angle-double-right"></i> Common Buttons &amp;
			Icons
		</small>
	</h1>
</div>
<!-- pageHeader END -->

<!-- pageContent  BEGAIN-->
<div class="row">
	<div class="col-xs-12">
		<!-- PAGE CONTENT BEGINS -->
		<div class="row">
			<div class="col-xs-12">
				<h3 class="header smaller lighter green">Application Buttons</h3>

				<!-- #section:elements.button.app -->
				<p></p>
				<a href="#" class="btn btn-default btn-app radius-4"> <i
					class="ace-icon fa fa-cog bigger-230"></i> Default <span
					class="badge badge-pink">+3</span>
				</a> <a href="#" class="btn btn-app btn-primary no-radius"> <i
					class="ace-icon fa fa-pencil-square-o bigger-230"></i> Edit <span
					class="badge badge-warning badge-left">11</span>
				</a> <a href="#" class="btn btn-app btn-success"> <i
					class="ace-icon fa fa-refresh bigger-230"></i> Reload
				</a>

				<button class="btn btn-app btn-warning">
					<i class="ace-icon fa fa-undo bigger-230"></i> Undo
				</button>

				<a href="#" class="btn btn-app btn-info btn-sm no-radius"> <i
					class="ace-icon fa fa-envelope bigger-200"></i> Mailbox <span
					class="label label-inverse arrowed-in">6+</span>
				</a>

				<button class="btn btn-app btn-danger btn-sm">
					<i class="ace-icon fa fa-trash-o bigger-200"></i> Delete
				</button>

				<button class="btn btn-app btn-purple btn-sm">
					<i class="ace-icon fa fa-cloud-upload bigger-200"></i> Upload
				</button>

				<button class="btn btn-app btn-pink btn-sm">
					<i class="ace-icon fa fa-share bigger-200"></i> Share
				</button>

				<button class="btn btn-app btn-inverse btn-xs">
					<i class="ace-icon fa fa-lock bigger-160"></i> Lock
				</button>

				<button class="btn btn-app btn-grey btn-xs radius-4">
					<i class="ace-icon fa fa-floppy-o bigger-160"></i> Save <span
						class="badge badge-transparent"> <i
						class="light-red ace-icon fa fa-asterisk"></i>
					</span>
				</button>

				<button class="btn btn-app btn-light btn-xs">
					<i class="ace-icon fa fa-print bigger-160"></i> Print
				</button>

				<a href="#" class="btn btn-app btn-yellow btn-xs"> <i
					class="ace-icon fa fa-shopping-cart bigger-160"></i> Shop
				</a>

				<div class="btn-group">
					<button class="btn btn-app btn-pink btn-xs">
						<i class="ace-icon fa fa-share bigger-175"></i> Share
					</button>

					<button data-toggle="dropdown"
						class="btn btn-app btn-pink btn-xs dropdown-toggle">
						<span class="bigger-110 ace-icon fa fa-caret-down icon-only"></span>
					</button>

					<ul class="dropdown-menu dropdown-pink">
						<li><a href="#">Action</a></li>

						<li><a href="#">Another action</a></li>

						<li><a href="#">Something else here</a></li>

						<li class="divider"></li>

						<li><a href="#">Separated link</a></li>
					</ul>
				</div>
				<!-- /.btn-group -->


				<!-- /section:elements.button.app -->
			</div>
		</div>

		<div class="space"></div>

		<div class="row">
			<div class="col-sm-6" id="default-buttons">
				<h3 class="row header smaller lighter purple">
					<span class="col-sm-6"> Default Buttons </span>
					<!-- /.col -->

					<span class="col-sm-6"> <label class="pull-right inline">
							<small class="muted smaller-90">Border:</small> <input
							id="id-button-borders" checked="" type="checkbox"
							class="ace ace-switch ace-switch-5" /> <span class="lbl middle"></span>
					</label>
					</span>
					<!-- /.col -->
				</h3>
				<!-- /.row -->

				<!-- #section:elements.button -->
				<p>
					<button class="btn">Default</button>
					<button class="btn btn-primary">Primary</button>
					<button class="btn btn-info">Info</button>
					<button class="btn btn-success">Success</button>
				</p>

				<p>
					<button class="btn btn-warning">Warning</button>
					<button class="btn btn-danger">Danger</button>
					<button class="btn btn-inverse">Inverse</button>
					<button class="btn btn-pink">Pink</button>
				</p>

				<p>
					<button class="btn btn-purple">Purple</button>
					<button class="btn btn-yellow">Yellow</button>
					<button class="btn btn-grey">Grey</button>
					<button class="btn btn-light">Light</button>
					<button class="btn btn-link">Link</button>
				</p>

				<!-- /section:elements.button -->

				<!-- #section:elements.button.white -->
				<p>
					<button type="button" class="btn btn-white">White</button>
					<button type="button" class="btn btn-white btn-default">Default</button>
					<button type="button" class="btn btn-white btn-primary">Primary</button>
					<button type="button" class="btn btn-white btn-info">Info</button>
					<button type="button" class="btn btn-white btn-success">Success</button>
					<button type="button" class="btn btn-white btn-warning">Warning</button>
				</p>

				<p>
					<button type="button" class="btn btn-white btn-danger btn-sm">Danger</button>
					<button type="button" class="btn btn-white btn-yellow btn-sm">Yellow</button>
					<button type="button" class="btn btn-white btn-pink btn-sm">Pink</button>
					<button type="button" class="btn btn-white btn-purple btn-sm">Purple</button>
					<button type="button" class="btn btn-white btn-inverse btn-sm">Inverse</button>
				</p>

				<!-- /section:elements.button.white -->
				<h3 class="header smaller lighter green">Button with Icons</h3>

				<p>
					<button class="btn btn-white btn-info btn-bold">
						<i class="ace-icon fa fa-floppy-o bigger-120 blue"></i> Backup
					</button>

					<button class="btn btn-white btn-warning btn-bold">
						<i class="ace-icon fa fa-trash-o bigger-120 orange"></i> Delete
					</button>

					<button class="btn btn-white btn-default btn-round">
						<i class="ace-icon fa fa-times red2"></i> Cancel
					</button>
				</p>

				<div class="hr hr-dotted hr-16"></div>

				<p>
					<button class="btn">
						<i class="ace-icon fa fa-pencil align-top bigger-125"></i> Default
					</button>

					<button class="btn btn-primary">
						<i class="ace-icon fa fa-flask align-top bigger-125"></i> Primary
					</button>

					<button class="btn btn-info">
						Info <i
							class="ace-icon fa fa-print  align-top bigger-125 icon-on-right"></i>
					</button>
				</p>

				<p>
					<button class="btn btn-lg btn-success">
						<i class="ace-icon fa fa-check"></i> Success
					</button>

					<button class="btn btn-sm btn-warning">
						<i class="ace-icon fa fa-fire bigger-110"></i> <span
							class="bigger-110 no-text-shadow">Warning</span>
					</button>

					<button class="btn btn-xs btn-danger">
						<i class="ace-icon fa fa-bolt bigger-110"></i> Danger <i
							class="ace-icon fa fa-arrow-right icon-on-right"></i>
					</button>
				</p>

				<p>
					<button class="btn btn-info">
						<i class="ace-icon fa fa-signal icon-only bigger-150"></i>
					</button>

					<button class="btn btn-warning btn-xs">
						<i class="ace-icon fa fa-wrench  bigger-110 icon-only"></i>
					</button>

					<button class="btn btn-danger btn-sm">
						<i class="ace-icon fa fa-reply icon-only"></i>
					</button>

					<button class="btn btn-grey btn-lg">
						<i class="ace-icon fa fa-trash-o fa-2x icon-only"></i>
					</button>
				</p>
			</div>
			<!-- /.col -->

			<div class="col-sm-6">
				<h3 class="header smaller lighter red">Button Sizing</h3>

				<p>
					<button class="btn btn-minier btn-yellow">Minier</button>
					<button class="btn btn-xs">Mini</button>
					<button class="btn btn-sm btn-primary">Small</button>
					<button class="btn btn-info">Default</button>
					<button class="btn btn-lg btn-success">Large Size</button>
				</p>

				<p>
					<button class="btn btn-warning btn-lg">Large Size</button>
					<button class="btn btn-danger">Default</button>
					<button class="btn btn-sm btn-inverse">Small</button>
					<button class="btn btn-xs btn-pink">Pink</button>
					<button class="btn btn-minier btn-purple">Purple</button>
				</p>
				<h3 class="header smaller lighter grey">Disabled Buttons</h3>

				<p>
					<button class="btn disabled">Default</button>
					<button class="btn disabled btn-primary">Primary</button>
					<button class="btn disabled btn-info">Info</button>
					<button class="btn disabled btn-success">Success</button>
				</p>

				<hr />
				<p>
					<button class="btn btn-danger btn-block">Block Button</button>
				</p>
			</div>
			<!-- /.col -->
		</div>
		<!-- /.row -->

		<hr />
		<div class="row">
			<div class="col-sm-6">
				<h3 class="header smaller lighter blue">Button Groups</h3>

				<p></p>
				<div class="btn-group">
					<button type="button" class="btn">1</button>
					<button type="button" class="btn">2</button>
					<button type="button" class="btn">3</button>
				</div>


				<p></p>
				<div class="btn-group">
					<button type="button" class="btn btn-white btn-sm btn-primary">Left</button>
					<button type="button" class="btn btn-white btn-sm btn-primary">Middle</button>
					<button type="button" class="btn btn-white btn-sm btn-primary">Right</button>
				</div>


				<p></p>
				<div class="btn-toolbar">
					<div class="btn-group">
						<button class="btn btn-light">1</button>
						<button class="btn btn-light">2</button>
						<button class="btn btn-light">3</button>
						<button class="btn btn-light">4</button>
					</div>

					<div class="btn-group btn-corner">
						<button class="btn">5</button>
						<button class="btn">6</button>
						<button class="btn">7</button>
					</div>

					<div class="btn-group">
						<button class="btn btn-grey">8</button>
					</div>
				</div>


				<p></p>
				<div class="btn-group btn-group-vertical">
					<button class="btn" type="button">
						<i class="icon-only ace-icon fa fa-align-left"></i>
					</button>

					<button class="btn" type="button">
						<i class="icon-only ace-icon fa fa-align-center"></i>
					</button>

					<button class="btn" type="button">
						<i class="icon-only ace-icon fa fa-align-right"></i>
					</button>

					<button class="btn" type="button">
						<i class="icon-only ace-icon fa fa-align-justify"></i>
					</button>
				</div>

				<div class="space-6"></div>


				<p>
					<button id="loading-btn" type="button" class="btn btn-success"
						data-loading-text="Loading...">Loading state</button>
					<button type="button" class="btn btn-primary" data-toggle="button">Single
						Toggle</button>
					<button type="button" class="btn btn-sm btn-danger"
						data-toggle="button">Small</button>
					<button type="button" class="btn btn-xs btn-info"
						data-toggle="button">Mini</button>
				</p>

				<p></p>
				<div>
					<span>Checkbox: &nbsp;</span>

					<div data-toggle="buttons" class="btn-group">
						<label class="btn btn-sm"> <input type="checkbox"
							value="1" /> <i class="icon-only ace-icon fa fa-bold bigger-110"></i>
						</label> <label class="btn btn-sm"> <input type="checkbox"
							value="2" /> <i
							class="icon-only ace-icon fa fa-italic bigger-110"></i>
						</label> <label class="btn btn-sm"> <input type="checkbox"
							value="3" /> <i
							class="icon-only ace-icon fa fa-underline bigger-110"></i>
						</label>
					</div>
				</div>


				<p></p>
				<div>
					<span>Checkbox: &nbsp;</span>

					<!-- #section:elements.button.group -->
					<div data-toggle="buttons" class="btn-group btn-overlap btn-corner">
						<label class="btn btn-sm btn-white btn-info"> <input
							type="checkbox" value="1" /> <i
							class="icon-only ace-icon fa fa-bold bigger-110"></i>
						</label> <label class="btn btn-sm btn-white btn-info"> <input
							type="checkbox" value="2" /> <i
							class="icon-only ace-icon fa fa-italic bigger-110"></i>
						</label> <label class="btn btn-sm btn-white btn-info"> <input
							type="checkbox" value="3" /> <i
							class="icon-only ace-icon fa fa-underline bigger-110"></i>
						</label>
					</div>

					<!-- /section:elements.button.group -->
				</div>


				<p></p>
				<div>
					<span>Radio: &nbsp;</span>

					<div data-toggle="buttons" class="btn-group">
						<label class="btn btn-primary"> <input type="radio"
							value="1" /> <i class="icon-only ace-icon fa fa-align-left"></i>
						</label> <label class="btn btn-primary"> <input type="radio"
							value="2" /> <i class="icon-only ace-icon fa fa-align-center"></i>
						</label> <label class="btn btn-primary"> <input type="radio"
							value="3" /> <i class="icon-only ace-icon fa fa-align-right"></i>
						</label>
					</div>

					<label class="btn btn-primary" data-toggle="button"> <i
						class="icon-only ace-icon fa fa-align-justify"></i>
					</label>
				</div>

			</div>
			<!-- /.span -->

			<div class="col-sm-6">
				<h3 class="header smaller lighter green">Button Dropdown</h3>

				<p></p>
				<div class="btn-toolbar">
					<div class="btn-group">
						<button data-toggle="dropdown" class="btn dropdown-toggle">
							Action <span class="ace-icon fa fa-caret-down icon-on-right"></span>
						</button>

						<ul class="dropdown-menu dropdown-default">
							<li><a href="#">Action</a></li>

							<li><a href="#">Another action</a></li>

							<li><a href="#">Something else here</a></li>

							<li class="divider"></li>

							<li><a href="#">Separated link</a></li>
						</ul>
					</div>
					<!-- /.btn-group -->

					<div class="btn-group">
						<button data-toggle="dropdown"
							class="btn btn-primary btn-white dropdown-toggle">
							Action <i class="ace-icon fa fa-angle-down icon-on-right"></i>
						</button>

						<ul class="dropdown-menu">
							<li><a href="#">Action</a></li>

							<li><a href="#">Another action</a></li>

							<li><a href="#">Something else here</a></li>

							<li class="divider"></li>

							<li><a href="#">Separated link</a></li>
						</ul>
					</div>
					<!-- /.btn-group -->

					<div class="btn-group">
						<button data-toggle="dropdown"
							class="btn btn-sm btn-danger dropdown-toggle">
							Danger <i class="ace-icon fa fa-angle-down icon-on-right"></i>
						</button>

						<ul class="dropdown-menu dropdown-danger">
							<li><a href="#">Action</a></li>

							<li><a href="#">Another action</a></li>

							<li><a href="#">Something else here</a></li>

							<li class="divider"></li>

							<li><a href="#">Separated link</a></li>
						</ul>
					</div>
					<!-- /.btn-group -->
				</div>

				<div class="space-4"></div>

				<div class="btn-toolbar">
					<div class="btn-group">
						<button data-toggle="dropdown"
							class="btn btn-warning dropdown-toggle">
							Warning <span class="ace-icon fa fa-caret-down icon-on-right"></span>
						</button>

						<ul class="dropdown-menu dropdown-warning">
							<li><a href="#">Action</a></li>

							<li><a href="#">Another action</a></li>

							<li><a href="#">Something else here</a></li>

							<li class="divider"></li>

							<li><a href="#">Separated link</a></li>
						</ul>
					</div>
					<!-- /.btn-group -->

					<div class="btn-group">
						<button data-toggle="dropdown"
							class="btn btn-success btn-lg dropdown-toggle">
							Success large <i class="ace-icon fa fa-angle-down icon-on-right"></i>
						</button>

						<ul class="dropdown-menu dropdown-success dropdown-menu-right">
							<li><a href="#">Action</a></li>

							<li><a href="#">Another action</a></li>

							<li><a href="#">Something else here</a></li>

							<li class="divider"></li>

							<li><a href="#">Separated link</a></li>
						</ul>
					</div>
					<!-- /.btn-group -->
				</div>

				<div class="space-4"></div>

				<div class="btn-toolbar">
					<div class="btn-group">
						<button data-toggle="dropdown"
							class="btn btn-info btn-sm dropdown-toggle">
							Info small <span class="ace-icon fa fa-caret-down icon-on-right"></span>
						</button>

						<ul class="dropdown-menu dropdown-info dropdown-menu-right">
							<li><a href="#">Action</a></li>

							<li><a href="#">Another action</a></li>

							<li><a href="#">Something else here</a></li>

							<li class="divider"></li>

							<li><a href="#">Separated link</a></li>
						</ul>
					</div>
					<!-- /.btn-group -->

					<div class="btn-group">
						<button data-toggle="dropdown"
							class="btn btn-inverse btn-xs dropdown-toggle">
							Inverse mini <span
								class="ace-icon fa fa-caret-down icon-on-right"></span>
						</button>

						<ul class="dropdown-menu dropdown-inverse">
							<li><a href="#">Action</a></li>

							<li><a href="#">Another action</a></li>

							<li><a href="#">Something else here</a></li>

							<li class="divider"></li>

							<li><a href="#">Separated link</a></li>
						</ul>
					</div>
					<!-- /.btn-group -->
				</div>

				<hr />


				<p></p>
				<div class="btn-toolbar">
					<div class="btn-group">
						<button class="btn">Action</button>

						<button data-toggle="dropdown" class="btn dropdown-toggle">
							<span class="ace-icon fa fa-caret-down icon-only"></span>
						</button>

						<ul class="dropdown-menu">
							<li><a href="#">Action</a></li>

							<li><a href="#">Another action</a></li>

							<li><a href="#">Something else here</a></li>

							<li class="divider"></li>

							<li><a href="#">Separated link</a></li>
						</ul>
					</div>
					<!-- /.btn-group -->

					<div class="btn-group">
						<button class="btn btn-sm btn-yellow">Some Action</button>

						<button data-toggle="dropdown"
							class="btn btn-sm btn-yellow dropdown-toggle">
							<i class="ace-icon fa fa-angle-down icon-only"></i>
						</button>

						<ul class="dropdown-menu dropdown-yellow">
							<li><a href="#">Action</a></li>

							<li><a href="#">Another action</a></li>

							<li><a href="#">Something else here</a></li>

							<li class="divider"></li>

							<li><a href="#">Separated link</a></li>
						</ul>
					</div>
					<!-- /.btn-group -->

					<div class="btn-group dropup">
						<button class="btn btn-xs btn-danger">Danger</button>

						<button data-toggle="dropdown"
							class="btn btn-xs btn-danger dropdown-toggle">
							<span class="ace-icon fa fa-caret-down icon-only"></span>
						</button>

						<ul class="dropdown-menu dropdown-danger">
							<li><a href="#">Action</a></li>

							<li><a href="#">Another action</a></li>

							<li><a href="#">Something else here</a></li>

							<li class="divider"></li>

							<li><a href="#">Separated link</a></li>
						</ul>
					</div>
					<!-- /.btn-group -->
				</div>

				<div class="space-2"></div>

				<div class="btn-toolbar">
					<div class="btn-group">
						<button class="btn btn-lg btn-warning">Warning</button>

						<button data-toggle="dropdown"
							class="btn btn-lg btn-warning dropdown-toggle">
							<span class="ace-icon fa fa-caret-down icon-only smaller-90"></span>
						</button>

						<ul class="dropdown-menu dropdown-warning">
							<li><a href="#">Action</a></li>

							<li><a href="#">Another action</a></li>

							<li><a href="#">Something else here</a></li>

							<li class="divider"></li>

							<li><a href="#">Separated link</a></li>
						</ul>
					</div>
					<!-- /.btn-group -->

					<div class="btn-group">
						<button class="btn btn-success">Success</button>

						<button data-toggle="dropdown"
							class="btn btn-success dropdown-toggle">
							<span class="ace-icon fa fa-caret-down icon-only"></span>
						</button>

						<ul class="dropdown-menu dropdown-success">
							<li><a href="#">Action</a></li>

							<li><a href="#">Another action</a></li>

							<li><a href="#">Something else here</a></li>

							<li class="divider"></li>

							<li><a href="#">Separated link</a></li>
						</ul>
					</div>
					<!-- /.btn-group -->

					<div class="btn-group">
						<button class="btn btn-info btn-white">Info</button>

						<button data-toggle="dropdown"
							class="btn btn-info btn-white dropdown-toggle">
							<span class="ace-icon fa fa-caret-down icon-only"></span>
						</button>

						<ul class="dropdown-menu dropdown-info dropdown-menu-right">
							<li><a href="#">Action</a></li>

							<li><a href="#">Another action</a></li>

							<li><a href="#">Something else here</a></li>

							<li class="divider"></li>

							<li><a href="#">Separated link</a></li>
						</ul>
					</div>
					<!-- /.btn-group -->
				</div>

				<div class="space-2"></div>

				<div class="btn-toolbar">
					<div class="btn-group">
						<button class="btn btn-inverse">Inverse</button>

						<button data-toggle="dropdown"
							class="btn btn-inverse dropdown-toggle">
							<span class="ace-icon fa fa-caret-down icon-only"></span>
						</button>

						<ul class="dropdown-menu dropdown-inverse">
							<li><a href="#">Action</a></li>

							<li><a href="#">Another action</a></li>

							<li><a href="#">Something else here</a></li>

							<li class="divider"></li>

							<li><a href="#">Separated link</a></li>
						</ul>
					</div>
					<!-- /.btn-group -->
				</div>

			</div>
			<!-- /.span -->
		</div>
		<!-- /.row -->

		<hr />
		<div class="row">
			<div class="col-sm-6">
				<h3 class="header smaller lighter green">Lables & Badges</h3>

				<!-- #section:elements.label -->
				<p>
					<span class="label">Default</span> <span
						class="label label-success arrowed">Success</span> <span
						class="label label-warning"> <i
						class="ace-icon fa fa-exclamation-triangle bigger-120"></i>
						Warning
					</span> <span class="label label-danger arrowed-in">Danger</span> <span
						class="label label-info arrowed-in-right arrowed">Info</span> <span
						class="label label-inverse">Inverse</span>
				</p>

				<!-- /section:elements.label -->

				<!-- #section:elements.badge -->
				<p>
					<span class="badge">1</span> <span class="badge badge-grey">1</span>
					<span class="badge badge-success">2</span> <span
						class="badge badge-warning">4</span> <span
						class="badge badge-danger">6</span> <span class="badge badge-info">8</span>
					<span class="badge badge-purple">3</span> <span
						class="badge badge-inverse">10</span> <span
						class="badge badge-pink">11</span> <span
						class="badge badge-yellow">2</span>
				</p>

				<!-- /section:elements.badge -->
				<p>
					<span class="label label-lg label-pink arrowed-right">Large</span>
					<span class="label label-lg label-yellow arrowed-in">Yellow</span>
					<span class="label label-lg label-purple arrowed">Purple</span>
				</p>

				<p>
					<span class="label label-xlg label-primary arrowed arrowed-right">Larger</span>
					<span
						class="label label-xlg label-grey arrowed-in-right arrowed-in">Grey</span>
					<span class="label label-xlg label-light arrowed-in-right">Light</span>
				</p>

				<p>
					<span class="label label-sm label-primary arrowed arrowed-right">Smaller</span>
				</p>
			</div>
			<!-- /.span -->

			<div class="col-sm-6">
				<h3 class="header smaller lighter red">Pagination</h3>

				<div>
					<ul class="pagination">
						<li class="disabled"><a href="#"> <i
								class="ace-icon fa fa-angle-double-left"></i>
						</a></li>

						<li class="active"><a href="#">1</a></li>

						<li><a href="#">2</a></li>

						<li><a href="#">3</a></li>

						<li><a href="#">4</a></li>

						<li><a href="#">5</a></li>

						<li><a href="#"> <i
								class="ace-icon fa fa-angle-double-right"></i>
						</a></li>
					</ul>
				</div>

				<p></p>
				<ul class="pager">
					<li class="previous"><a href="#">&larr; Older</a></li>

					<li class="next"><a href="#">Newer &rarr;</a></li>
				</ul>

			</div>
			<!-- /.span -->
		</div>
		<!-- /.row -->

		<hr />
		<div class="row">
			<div class="col-xs-12">
				<h3 class="header smaller lighter blue">
					369 Scalable FontAwesome Icons <small> <a
						href="http://fontawesome.io/icons/" target="_blank"> (see all
							icons <i class="ace-icon fa fa-external-link"></i>)
					</a>
					</small>
				</h3>
			</div>

			<div class="col-xs-6 col-sm-3">
				<ul class="list-unstyled">
					<li><i class="ace-icon fa fa-adjust"></i> fa-adjust</li>

					<li><i class="ace-icon fa fa-asterisk"></i> fa-asterisk</li>

					<li><i class="ace-icon fa fa-ban"></i> fa-ban</li>

					<li><i class="ace-icon fa fa-bar-chart-o"></i> fa-bar-chart-o
					</li>

					<li><i class="ace-icon fa fa-barcode"></i> fa-barcode</li>

					<li><i class="ace-icon fa fa-flask"></i> fa-flask</li>

					<li><i class="ace-icon fa fa-beer"></i> fa-beer</li>

					<li><i class="ace-icon fa fa-bell-o"></i> fa-bell-o</li>

					<li><i class="ace-icon fa fa-bell"></i> fa-bell</li>

					<li><i class="ace-icon fa fa-bolt"></i> fa-bolt</li>

					<li><i class="ace-icon fa fa-book"></i> fa-book</li>

					<li><i class="ace-icon fa fa-bookmark"></i> fa-bookmark</li>

					<li><i class="ace-icon fa fa-bookmark-o"></i> fa-bookmark-o</li>

					<li><i class="ace-icon fa fa-briefcase"></i> fa-briefcase</li>

					<li><i class="ace-icon fa fa-bullhorn"></i> fa-bullhorn</li>

					<li><i class="ace-icon fa fa-calendar"></i> fa-calendar</li>

					<li><i class="ace-icon fa fa-camera"></i> fa-camera</li>

					<li><i class="ace-icon fa fa-camera-retro"></i>
						fa-camera-retro</li>

					<li><i class="ace-icon fa fa-certificate"></i> fa-certificate
					</li>
				</ul>
			</div>

			<div class="col-xs-6 col-sm-3">
				<ul class="list-unstyled">
					<li><i class="ace-icon fa fa-check-square-o"></i>
						fa-check-square-o</li>

					<li><i class="ace-icon fa fa-square-o"></i> fa-square-o</li>

					<li><i class="ace-icon fa fa-circle"></i> fa-circle</li>

					<li><i class="ace-icon fa fa-circle-o"></i> fa-circle-o</li>

					<li><i class="ace-icon fa fa-cloud"></i> fa-cloud</li>

					<li><i class="ace-icon fa fa-cloud-download"></i>
						fa-cloud-download</li>

					<li><i class="ace-icon fa fa-cloud-upload"></i>
						fa-cloud-upload</li>

					<li><i class="ace-icon fa fa-coffee"></i> fa-coffee</li>

					<li><i class="ace-icon fa fa-cog"></i> fa-cog</li>

					<li><i class="ace-icon fa fa-cogs"></i> fa-cogs</li>

					<li><i class="ace-icon fa fa-comment"></i> fa-comment</li>

					<li><i class="ace-icon fa fa-comment-o"></i> fa-comment-o</li>

					<li><i class="ace-icon fa fa-comments"></i> fa-comments</li>

					<li><i class="ace-icon fa fa-comments-o"></i> fa-comments-o</li>

					<li><i class="ace-icon fa fa-credit-card"></i> fa-credit-card
					</li>

					<li><i class="ace-icon fa fa-tachometer"></i> fa-tachometer</li>

					<li><i class="ace-icon fa fa-desktop"></i> fa-desktop</li>

					<li><i class="ace-icon fa fa-arrow-circle-o-down"></i>
						fa-arrow-circle-o-down</li>

					<li><i class="ace-icon fa fa-download"></i> fa-download</li>
				</ul>
			</div>

			<div class="col-xs-6 col-sm-3">
				<ul class="list-unstyled">
					<li><i class="ace-icon fa fa-pencil-square-o"></i>
						fa-pencil-square-o</li>

					<li><i class="ace-icon fa fa-envelope"></i> fa-envelope</li>

					<li><i class="ace-icon fa fa-envelope-o"></i> fa-envelope-o</li>

					<li><i class="ace-icon fa fa-exchange"></i> fa-exchange</li>

					<li><i class="ace-icon fa fa-exclamation-circle"></i>
						fa-exclamation-circle</li>

					<li><i class="ace-icon fa fa-external-link"></i>
						fa-external-link</li>

					<li><i class="ace-icon fa fa-eye-slash"></i> fa-eye-slash</li>

					<li><i class="ace-icon fa fa-eye"></i> fa-eye</li>

					<li><i class="ace-icon fa fa-video-camera"></i>
						fa-video-camera</li>

					<li><i class="ace-icon fa fa-fighter-jet"></i> fa-fighter-jet
					</li>

					<li><i class="ace-icon fa fa-film"></i> fa-film</li>

					<li><i class="ace-icon fa fa-filter"></i> fa-filter</li>

					<li><i class="ace-icon fa fa-fire"></i> fa-fire</li>

					<li><i class="ace-icon fa fa-flag"></i> fa-flag</li>

					<li><i class="ace-icon fa fa-folder"></i> fa-folder</li>

					<li><i class="ace-icon fa fa-folder-open"></i> fa-folder-open
					</li>

					<li><i class="ace-icon fa fa-folder-o"></i> fa-folder-o</li>

					<li><i class="ace-icon fa fa-folder-open-o"></i>
						fa-folder-open-o</li>

					<li><i class="ace-icon fa fa-cutlery"></i> fa-cutlery</li>
				</ul>
			</div>

			<div class="col-xs-6 col-sm-3">
				<ul class="list-unstyled">
					<li><i class="ace-icon fa fa-gift"></i> fa-gift</li>

					<li><i class="ace-icon fa fa-glass"></i> fa-glass</li>

					<li><i class="ace-icon fa fa-globe"></i> fa-globe</li>

					<li><i class="ace-icon fa fa-users"></i> fa-users</li>

					<li><i class="ace-icon fa fa-hdd-o"></i> fa-hdd-o</li>

					<li><i class="ace-icon fa fa-headphones"></i> fa-headphones</li>

					<li><i class="ace-icon fa fa-heart"></i> fa-heart</li>

					<li><i class="ace-icon fa fa-heart-o"></i> fa-heart-o</li>

					<li><i class="ace-icon fa fa-home"></i> fa-home</li>

					<li><i class="ace-icon fa fa-inbox"></i> fa-inbox</li>

					<li><i class="ace-icon fa fa-info-circle"></i> fa-info-circle
					</li>

					<li><i class="ace-icon fa fa-key"></i> fa-key</li>

					<li><i class="ace-icon fa fa-leaf"></i> fa-leaf</li>

					<li><i class="ace-icon fa fa-laptop"></i> fa-laptop</li>

					<li><i class="ace-icon fa fa-gavel"></i> fa-gavel</li>

					<li><i class="ace-icon fa fa-lemon-o"></i> fa-lemon-o</li>

					<li><i class="ace-icon fa fa-lightbulb-o"></i> fa-lightbulb-o
					</li>

					<li><i class="ace-icon fa fa-lock"></i> fa-lock</li>

					<li><i class="ace-icon fa fa-unlock"></i> fa-unlock</li>
				</ul>
			</div>
		</div>

		<hr />
		<div class="row">
			<div class="col-xs-12">
				<h3 class="header smaller lighter blue">
					200 Scalable Glyphicons <small> <a
						href="http://getbootstrap.com/components/#glyphicons"
						target="_blank"> (see all icons <i
							class="ace-icon fa fa-external-link"></i>)
					</a>
					</small>
				</h3>
			</div>

			<div class="col-xs-6 col-sm-3">
				<ul class="list-unstyled">
					<li><i class="ace-icon glyphicon glyphicon-asterisk"></i>
						glyphicon-asterisk</li>

					<li><i class="ace-icon glyphicon glyphicon-plus"></i>
						glyphicon-plus</li>

					<li><i class="ace-icon glyphicon glyphicon-euro"></i>
						glyphicon-euro</li>

					<li><i class="ace-icon glyphicon glyphicon-minus"></i>
						glyphicon-minus</li>

					<li><i class="ace-icon glyphicon glyphicon-cloud"></i>
						glyphicon-cloud</li>

					<li><i class="ace-icon glyphicon glyphicon-envelope"></i>
						glyphicon-envelope</li>

					<li><i class="ace-icon glyphicon glyphicon-pencil"></i>
						glyphicon-pencil</li>

					<li><i class="ace-icon glyphicon glyphicon-glass"></i>
						glyphicon-glass</li>

					<li><i class="ace-icon glyphicon glyphicon-music"></i>
						glyphicon-music</li>

					<li><i class="ace-icon glyphicon glyphicon-search"></i>
						glyphicon-search</li>

					<li><i class="ace-icon glyphicon glyphicon-heart"></i>
						glyphicon-heart</li>

					<li><i class="ace-icon glyphicon glyphicon-star"></i>
						glyphicon-star</li>

					<li><i class="ace-icon glyphicon glyphicon-star"></i>
						glyphicon-star-empty</li>

					<li><i class="ace-icon glyphicon glyphicon-user"></i>
						glyphicon-user</li>

					<li><i class="ace-icon glyphicon glyphicon-film"></i>
						glyphicon-film</li>

					<li><i class="ace-icon glyphicon glyphicon-th"></i>
						glyphicon-th-large</li>

					<li><i class="ace-icon glyphicon glyphicon-th"></i>
						glyphicon-th</li>

					<li><i class="ace-icon glyphicon glyphicon-th"></i>
						glyphicon-th-list</li>

					<li><i class="ace-icon glyphicon glyphicon-ok"></i>
						glyphicon-ok</li>
				</ul>
			</div>

			<div class="col-xs-6 col-sm-3">
				<ul class="list-unstyled">
					<li><i class="ace-icon glyphicon glyphicon-remove"></i>
						glyphicon-remove</li>

					<li><i class="ace-icon glyphicon glyphicon-zoom-in"></i>
						glyphicon-zoom-in</li>

					<li><i class="ace-icon glyphicon glyphicon-zoom-out"></i>
						glyphicon-zoom-out</li>

					<li><i class="ace-icon glyphicon glyphicon-off"></i>
						glyphicon-off</li>

					<li><i class="ace-icon glyphicon glyphicon-signal"></i>
						glyphicon-signal</li>

					<li><i class="ace-icon glyphicon glyphicon-cog"></i>
						glyphicon-cog</li>

					<li><i class="ace-icon glyphicon glyphicon-trash"></i>
						glyphicon-trash</li>

					<li><i class="ace-icon glyphicon glyphicon-home"></i>
						glyphicon-home</li>

					<li><i class="ace-icon glyphicon glyphicon-file"></i>
						glyphicon-file</li>

					<li><i class="ace-icon glyphicon glyphicon-time"></i>
						glyphicon-time</li>

					<li><i class="ace-icon glyphicon glyphicon-road"></i>
						glyphicon-road</li>

					<li><i class="ace-icon glyphicon glyphicon-download"></i>
						glyphicon-download-alt</li>

					<li><i class="ace-icon glyphicon glyphicon-download"></i>
						glyphicon-download</li>

					<li><i class="ace-icon glyphicon glyphicon-upload"></i>
						glyphicon-upload</li>

					<li><i class="ace-icon glyphicon glyphicon-inbox"></i>
						glyphicon-inbox</li>

					<li><i class="ace-icon glyphicon glyphicon-play"></i>
						glyphicon-play-circle</li>

					<li><i class="ace-icon glyphicon glyphicon-repeat"></i>
						glyphicon-repeat</li>

					<li><i class="ace-icon glyphicon glyphicon-refresh"></i>
						glyphicon-refresh</li>

					<li><i class="ace-icon glyphicon glyphicon-list"></i>
						glyphicon-list-alt</li>
				</ul>
			</div>

			<div class="col-xs-6 col-sm-3">
				<ul class="list-unstyled">
					<li><i class="ace-icon glyphicon glyphicon-lock"></i>
						glyphicon-lock</li>

					<li><i class="ace-icon glyphicon glyphicon-flag"></i>
						glyphicon-flag</li>

					<li><i class="ace-icon glyphicon glyphicon-headphones"></i>
						glyphicon-headphones</li>

					<li><i class="ace-icon glyphicon glyphicon-volume-off"></i>
						glyphicon-volume-off</li>

					<li><i class="ace-icon glyphicon glyphicon-volume-down"></i>
						glyphicon-volume-down</li>

					<li><i class="ace-icon glyphicon glyphicon-volume-up"></i>
						glyphicon-volume-up</li>

					<li><i class="ace-icon glyphicon glyphicon-qrcode"></i>
						glyphicon-qrcode</li>

					<li><i class="ace-icon glyphicon glyphicon-barcode"></i>
						glyphicon-barcode</li>

					<li><i class="ace-icon glyphicon glyphicon-tag"></i>
						glyphicon-tag</li>

					<li><i class="ace-icon glyphicon glyphicon-tags"></i>
						glyphicon-tags</li>

					<li><i class="ace-icon glyphicon glyphicon-book"></i>
						glyphicon-book</li>

					<li><i class="ace-icon glyphicon glyphicon-bookmark"></i>
						glyphicon-bookmark</li>

					<li><i class="ace-icon glyphicon glyphicon-print"></i>
						glyphicon-print</li>

					<li><i class="ace-icon glyphicon glyphicon-camera"></i>
						glyphicon-camera</li>

					<li><i class="ace-icon glyphicon glyphicon-font"></i>
						glyphicon-font</li>

					<li><i class="ace-icon glyphicon glyphicon-bold"></i>
						glyphicon-bold</li>

					<li><i class="ace-icon glyphicon glyphicon-italic"></i>
						glyphicon-italic</li>

					<li><i class="ace-icon glyphicon glyphicon-text-height"></i>
						glyphicon-text-height</li>

					<li><i class="ace-icon glyphicon glyphicon-text-width"></i>
						glyphicon-text-width</li>
				</ul>
			</div>

			<div class="col-xs-6 col-sm-3">
				<ul class="list-unstyled">
					<li><i class="ace-icon glyphicon glyphicon-align-left"></i>
						glyphicon-align-left</li>

					<li><i class="ace-icon glyphicon glyphicon-align-center"></i>
						glyphicon-align-center</li>

					<li><i class="ace-icon glyphicon glyphicon-align-right"></i>
						glyphicon-align-right</li>

					<li><i class="ace-icon glyphicon glyphicon-align-justify"></i>
						glyphicon-align-justify</li>

					<li><i class="ace-icon glyphicon glyphicon-list"></i>
						glyphicon-list</li>

					<li><i class="ace-icon glyphicon glyphicon-indent-left"></i>
						glyphicon-indent-left</li>

					<li><i class="ace-icon glyphicon glyphicon-indent-right"></i>
						glyphicon-indent-right</li>

					<li><i class="ace-icon glyphicon glyphicon-facetime-video"></i>
						glyphicon-facetime-video</li>

					<li><i class="ace-icon glyphicon glyphicon-picture"></i>
						glyphicon-picture</li>

					<li><i class="ace-icon glyphicon glyphicon-map-marker"></i>
						glyphicon-map-marker</li>

					<li><i class="ace-icon glyphicon glyphicon-adjust"></i>
						glyphicon-adjust</li>

					<li><i class="ace-icon glyphicon glyphicon-tint"></i>
						glyphicon-tint</li>

					<li><i class="ace-icon glyphicon glyphicon-edit"></i>
						glyphicon-edit</li>

					<li><i class="ace-icon glyphicon glyphicon-share"></i>
						glyphicon-share</li>

					<li><i class="ace-icon glyphicon glyphicon-check"></i>
						glyphicon-check</li>

					<li><i class="ace-icon glyphicon glyphicon-move"></i>
						glyphicon-move</li>

					<li><i class="ace-icon glyphicon glyphicon-step-backward"></i>
						glyphicon-step-backward</li>

					<li><i class="ace-icon glyphicon glyphicon-fast-backward"></i>
						glyphicon-fast-backward</li>

					<li><i class="ace-icon glyphicon glyphicon-backward"></i>
						glyphicon-backward</li>
				</ul>
			</div>
		</div>
		<!-- PAGE CONTENT ENDS -->
	</div>
	<!-- /.col -->
</div>
<!-- pageContent END -->
</@mainlayout>
